<!DOCTYPE html>
<html>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>

<body>
	<div id="cans">
		<video id="video" src="0.mp4" controls="controls" width="500px" height="500px">
			
		</video>
		<aside id="playList">
			<header>
				<h4>播放列表</h4>
			</header>
			<ul id="list">

			</ul>
			<button title="收起播放列表" id="playList-hidden"> </button>
		</aside>
		<button title="展开播放列表" id="playList-show1"> </button>
	</div>

	<div id="cans">
		<button onclick="enableMute()" type="button">关闭声音</button>
		<button onclick="disableMute()" type="button">打开声音</button>
		<button onclick="playVid()" type="button">播放视频</button>
		<button onclick="pauseVid()" type="button">暂停视频</button>
		<button onclick="showFull()" type="button">全屏</button><br />
		<span>进度条:</span>
		<progress value="0" max="0" id="pro"></progress>
		<span>音量:</span>
		<input type="range" min="0" max="100" value="50" onchange="setvalue()" id="ran" />
	</div>

	<script>
		var aside = document.getElementById("playList");
		var ctrl = document.getElementById("playList-hidden");
		var ctrl_show = document.getElementById('playList-show1');
		var btn = document.getElementsByTagName("button");
		
		var myvideo = document.getElementById("video");
		var pro = document.getElementById("pro");
		var ran = document.getElementById("ran");
		var url = [];
		//获取播放列表
		$(function () {
			$.get("http://localhost:8888/index/get", function (data) {
				url = data;
				var temStr = "";
				for (var i = 0; i < url.length; i++) {
					title=url[i].split("\\");
					$("#list").append('<li class="ul-li" value="'  + url[i] + '">' +title[title.length-1]+ '</li>');
				}
				$(".ul-li").click(function () { 
					$("#video").attr("src",$(this).attr('value'));
				})
			});

		});
		//关闭声音
		function enableMute() {
			myvideo.muted = true;
			btn[0].disabled = true;
			btn[1].disabled = false;
		}


		//打开声音
		function disableMute() {
			myvideo.muted = false;
			btn[0].disabled = false;
			btn[1].disabled = true;
		}

		//播放视频
		function playVid() {
			myvideo.play();
			setInterval(pro1, 1000);
		}

		//暂停视频
		function pauseVid() {
			myvideo.pause();
		}

		//全屏
		function showFull() {
			myvideo.webkitrequestFullscreen();
		}

		//进度条展示
		function pro1() {
			pro.max = myvideo.duration;
			pro.value = myvideo.currentTime;
		}

		//拖动range进行调音量大小
		function setvalue() {
			myvideo.volume = ran.value / 100;
			myvideo.muted = false;
		}

		//展开播放列表
		ctrl_show.onclick = function () {
			aside.style.display = "block";
			ctrl_show.style.visibility = 'hidden';
			setTimeout(function () {
				aside.style.transform = "translateX(0vw)";
			}, "0");
		}

		//收起播放列表
		ctrl.onclick = function () {
			aside.style.transition = "1s";
			aside.style.transform = "translateX(-10vw)";
			setTimeout(function () {
				aside.style.display = "none";
				ctrl_show.style.visibility = 'visible';
			}, "1000");
		}
	</script>

</body>

</html>